<!--
*@Author: QWP
*@Description: 
*@Date: 2024-09-10 19:48:49
-->
<template>
  <a-space style=" color: #aaa;" size="middle"
    class="u-date-change-box">
    <a-space style="color: #000;">
      <LeftOutlined class="u-exchange-icon" @click="beforeAndNext(1)"/>
      <a-date-picker v-bind="$attrs" :bordered="false" style="width: 100px"
        @change="pickerChange"
        class="u-datechange-picker"/>
      <RightOutlined class="u-exchange-icon" @click="beforeAndNext(2)" />
    </a-space>
  </a-space>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted, useAttrs, watch } from 'vue' 
import { storeToRefs } from 'pinia'
import { useRoute, useRouter } from 'vue-router'
import dayjs from 'dayjs'

type modeType = 'day' | 'month' | 'quarter' | 'year'
const props = withDefaults(
  defineProps<{
    mode?: modeType
  }>(), {
    mode: 'day',
  }
)

const attrs = useAttrs()
const emits = defineEmits(['update:value', 'change'])

// 前后切换
const beforeAndNext = (type: number) => {
  let data = type == 1 ? dayjs(attrs['value']).subtract(1, props.mode) : dayjs(attrs['value']).add(1, props.mode)
  emits('update:value', data.format(attrs['valueFormat']))
  emits('change', data.format(attrs['valueFormat']))
}

const pickerChange = (date: dayjs | string, dateString: string) => {
  emits('update:value', date )
  emits('change', date)
}

// watch(() => attrs['value'], (nval, oval) => {
//   if(!nval) {
//     emits('update:value', dayjs(nval))
//   }
// }, { immediate: true })
</script>

<style lang='scss'>
.u-date-change-box {
  .ant-picker-suffix {
    display: none
  }
  .u-exchange-icon {
    padding: 6px;
    background-color: #1890ff;
    color: #fff;
    // cursor: pointer;
    border: 1px solid;
    border-radius: 4px;
  }
  .u-datechange-picker {
    input {
      text-align: center
    }
  }
}
</style>